<template>
  <div>
    <div class="icon-text-container">
      <van-icon name="arrow-left" @click="returnMyView()" />
      <span class="text">个人资料</span>
    </div>
    <div>
      <van-cell-group>
        <van-cell title="基础信息" style="background-color: #F5F5F5;" />
        <van-cell title="头像" is-link @click="toUpdateAvatar()">
          <template #value>
            <van-image round width="1.6rem" height="1.6rem" :src="userInfo.avatar"  />
          </template>
        </van-cell>
        <van-cell title="账号" is-link :value="userInfo.username" @click="toUpdateUsername()"></van-cell>
        <van-cell title="昵称" is-link :value="userInfo.name" @click="toUpdateName()" />
        <van-cell title="简介" is-link :value="userInfo.briefIntroduction"  @click="toUpdateIntro()"/>
        <van-cell title="收货地址" is-link  to="/addressList"/>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import http from '../../utils/http';
import { useRouter, useRoute } from 'vue-router';
import { ref, toRefs,onMounted } from 'vue';


//数据请求区
const userId = localStorage.getItem("userId");
const userInfo = ref({});
const getUserById = async () => {
    try {
        const response = await http.get(`/user/getUserById/${userId}`);
        userInfo.value=response.data.data;
    }
    catch (error) {
        console.error(error);
    }
};

onMounted(() => {
  getUserById();
});
//编程导航区
const router = useRouter();
const route = useRoute();

function returnMyView() {
  router.push('/myHome');
}
function toUpdateName() {
  router.push(
    {
      path: '/updateName',
      query: {
        name: userInfo.value.name,
      }
    }
  )
}
function toUpdateIntro() {
  router.push(
    {
      path: '/updateIntro',
      query: {
        briefIntroduction: userInfo.value.briefIntroduction,
      }
    }
  )
}

function toUpdateUsername() {
  router.push(
    {
      path: '/updateUsername',
      query: {
        username: userInfo.value.username,
      }
    }
  )
}

function toUpdateAvatar() {
  router.push(
    {
      path: '/updateAvatar',
      query: {
        avatar: userInfo.value.avatar,
      }
    }
  )
}
</script>

<style lang="scss" scoped>
//顶头一行的样式
.icon-text-container {
  display: flex;
  align-items: center;
  line-height: 50px;
  /* 调整垂直对齐 */
  font-size: 22px;
  /* 设置整体字体大小，图标和文字都会放大 */
}

//顶头图标与文字间距
.text {
  margin-left: 120px;
  /* 图标和文本之间的间距 */
}

.van-cell {
  --van-cell-border-color: #9e9fa2bd;
}
</style>